<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.text.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Text, TextSystem} = EVA.plugin.renderer.text;

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
          }),
          new TextSystem(),
        ],
      });

      // 此处还在考虑如何设置默认场景的宽高
      game.scene.transform.size = {
        width: 750,
        height: 1000,
      };

      const text = new GameObject('text', {
        position: {
          x: 0,
          y: 0,
        },
        origin: {
          x: 0.5,
          y: 0.5,
        },
        anchor: {
          x: 0.5,
          y: 0.5,
        },
      });

      text.addComponent(
        new Text({
          text: '欢迎使用EVA互动游戏开发体系！',
          style: {
            fontFamily: 'Arial',
            fontSize: 36,
            fontStyle: 'italic',
            fontWeight: 'bold',
            fill: ['#b35d9e', '#84c35f', '#ebe44f'], // gradient
            fillGradientType: 1,
            fillGradientStops: [0.1, 0.4],
            stroke: '#4a1850',
            strokeThickness: 5,
            dropShadow: true,
            dropShadowColor: '#000000',
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 6,
            dropShadowDistance: 6,
            wordWrap: true,
            wordWrapWidth: 400,
            breakWords: true,
          },
        }),
      );

      game.scene.addChild(text);
    </script>
  </body>
</html>
